<template>
    <div>
        <div class="page-title">基础组件</div>
        <div class="cmps">
            <div v-for="cmp in baseCmps" class="cmp" @click="addCmp(cmp)">
                {{ cmp.name }}
            </div>
        </div>
        <div class="page-title mt-8">标准组件</div>
        <div class="cmps">
            <div v-for="cmp in cmps" class="cmp" @click="addCmp(cmp)">
                {{ cmp.name }}
            </div>
        </div>

        <div class="page-title mt-8">业务组件</div>
        <div class="cmps">
            <div
                v-for="cmp in tenantCmps"
                class="cmp"
                @click="
                    addCmp(
                        {
                            ...cmp.publishedConfig,
                            name: cmp.name,
                        },
                        'custom'
                    )
                ">
                {{ cmp.name }}
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted } from "vue";
import { examples } from "./example/chart.js";

const emits = defineEmits(["select"]);
let defStyle = {
    borderStyle: "solid",
    borderWidth: "0px",
    borderColor: "#ddd",
};

const baseCmps = [
    {
        name: "文本",
        code: "text",
        config: { text: "文本" },
        style: { display: "flex", alignItems: "center", justifyContent: "center", fontSize: "14px", ...defStyle },
    },
    { name: "图片", code: "image", config: { image: "" }, style: { width: "50%", height: "200px", ...defStyle } },
    { name: "标题栏", code: "title-bar", config: {}, style: { height: "48px", width: "100%", ...defStyle }, class: "v-center" },
    { name: "轮播图", code: "carousel", config: { images: [] }, style: { width: "100%", height: "300px", ...defStyle } },
    { name: "网页代码", code: "html", config: { html: "<h1>网页代码片段</h1>" }, style: { ...defStyle } },
    {
        name: "空白面板",
        code: "blank",
        config: {},
        style: { height: "400px", width: "100%", background: "#fff", borderRadius: "5px", ...defStyle },
        class: "",
    },
    {
        name: "动态渲染",
        code: "render",
        config: {
            template: `(h, {https}) => {
    // h为vue的渲染函数，此处可返回异步内容，因此可以进行远程接口调用获取数据并进行处理
    // https为远程调用函数，可执行post/get调用，比如https.post('/test', {a: 1}).then(...)等
    // h中的渲染函数可以el-tag等常用组件
    // 以下示例中func为模拟远程取数的逻辑
    let func = Promise.resolve({text: '未配置模板内容'})
    return func.then((data) => {
        return h('el-tag', {type: 'primary'}, () => data.text)
    })
}`,
        },
        style: { height: "400px", width: "100%", ...defStyle },
        class: "content-panel",
    },
    {
        name: "ECharts图表",
        code: "chart",
        config: { options: examples[0].value },
        style: { height: "400px", width: "100%", ...defStyle },
        class: "content-panel",
    },
    {
        name: "数字七彩卡片",
        code: "color-cards",
        config: {
            items: `({https}) => {
    // 返回列表数据，其中字段name为数值名称，value为对应的数值
    return [
        {name: '设备数量', value: 1}, 
        {name: '网关数量', value: 2}
    ]
}`,
        },
        style: { height: "200px", width: "100%", ...defStyle },
    },
    // 有问题，会导致无法拖动
    { name: "内嵌网页", code: "frame", config: { src: "", style: { ...defStyle } } },
];

const cmps = [
    { name: "快捷应用", code: "quick-apps", config: {}, style: { height: "400px", width: "66.66%", ...defStyle }, class: "content-panel" },
    { name: "全部应用", code: "apps", config: {}, style: { height: "500px", width: "100%", ...defStyle }, class: "" },
    { name: "站内信", code: "inbox-msg", config: {}, style: { height: "400px", width: "33.33%", ...defStyle }, class: "content-panel" },
    { name: "系统公告", code: "announcement", config: {}, style: { height: "400px", width: "33.33%", ...defStyle }, class: "content-panel" },
    { name: "月度登录统计", code: "login-stat-month", config: {}, style: { height: "400px", width: "100%", ...defStyle }, class: "content-panel" },
    { name: "应用使用统计", code: "app-use-stat", config: {}, style: { height: "400px", width: "100%" }, class: "content-panel" },
];
const tenantCmps = ref([]);

onMounted(() => {
    app.https.post("/sys/workbench-cmp/query", { status: "published" }).then((resp) => {
        tenantCmps.value = resp;
    });
});

function addCmp(cmp) {
    emits("select", cmp);
}
</script>

<style lang="scss" scoped>
.cmps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    z-index: 20;

    .cmp {
        border: 1px solid var(--main_border_color);
        background: var(--sub_bg_color);
        border-radius: 2px;
        box-shadow: 0 0 5px var(--main_shadow_color);
        cursor: pointer;
        line-height: 30px;
        text-align: center;
        color: var(--main_font_color);

        &:hover {
            box-shadow: 0 0 4px var(--sub_shadow_color);
            color: var(--primary_color);
        }
    }
}
</style>
